<style scoped>
.chart {
  width: 270px;
  height: 850px;
}
</style>
<template>
  <div>
    <div class="chart" id="main" style="height: 230px; width: 320px"></div>
  </div>
</template>
<script setup lang="ts">
import { onMounted } from "vue";
import * as echarts from "echarts";

var option;
onMounted(() => {
  var chartDom = document.getElementById("main");
  var myChart = echarts.init(chartDom);

  option = {
    title: {
      text: "学习时长",
    },
    xAxis: {
      type: "category",
      data: ["4.9", "4.10", "4.11", "4.12", "4.13", "4.14", "4.15"],
    },
    yAxis: {},
    series: [
      {
        data: [20, 30, 27, 62, 27, 26, 36],
        type: "line",
        smooth: true,
        normal: {
          width: 2,
        },
        label: {
          show: true,
          position: "top",
          fontSize: 12,
        },
        itemStyle: {
          color: "#FFA500", // 设置线条颜色为橙色
        },
        symbol: "circle", // 设置点的形状为圆形
        symbolSize: 8, // 设置点的大小
      },
    ],
  };

  option && myChart.setOption(option);
});
</script>